<script setup>
import homeCategoryVue from './components/home-category.vue'
import homeBannerVue from './components/home-banner.vue'
import homePanelVue from './components/home-panel.vue'
import { getFindNewAPI, getFindHotAPI, getHotBrandAPI } from '@/api'
import { ref } from 'vue'
// 获取新鲜好物列表数据
const findNewList = ref([])
async function getFindNew() {
  const { result } = await getFindNewAPI()
  findNewList.value = result
}
getFindNew()
// 获取人气推荐列表数据
const findHotList = ref([])
async function getFindHot() {
  const { result } = await getFindHotAPI()
  findHotList.value = result
}
getFindHot()
// 获取热门品牌列表数据
const hotBrandList = ref([])
async function getHotBrand() {
  const { result } = await getHotBrandAPI()
  hotBrandList.value = result
}
getHotBrand()
</script>

<template>
  <div class="page-home">
    <div class="home-entry">
      <div class="container">
        <!-- 左侧分类 -->
        <homeCategoryVue />
        <!-- banner轮播图 -->
        <homeBannerVue />
      </div>
      <!-- 新鲜好物 -->
      <homePanelVue title="新鲜好物" subTitle="新鲜出炉 品质靠谱">
        <template #right><XtxMore /></template>
        <template #main>
          <ul ref="pannel" class="goods-list">
            <li v-for="item in findNewList" :key="item.id">
              <RouterLink :to="`/good/${item.id}`">
                <img v-lazy-img="item.picture" />
                <p class="name">{{ item.name }}</p>
                <p class="price">&yen;{{ item.price }}</p>
              </RouterLink>
            </li>
          </ul>
        </template>
      </homePanelVue>
      <!-- 人气推荐 -->
      <homePanelVue title="人气推荐" subTitle="人气爆款 不容错过" style="padding-bottom:20px">
        <template #main>
          <ul ref="pannel" class="goods-list">
            <li v-for="item in findHotList" :key="item.id">
              <RouterLink to="/">
                <img v-lazy-img="item.picture" />
                <p class="name">{{ item.title }}</p>
                <p class="desc">{{ item.alt }}</p>
              </RouterLink>
            </li>
          </ul>
        </template>
      </homePanelVue>
      <!-- 热门品牌 -->
      <homePanelVue title="热门品牌" subTitle="国际经典 品质保证" style="background-color:#f5f5f5">
        <template #main>
          <ul class="brand-list">
            <li v-for="item in hotBrandList" :key="item.id">
              <img v-lazy-img="item.picture" />
            </li>
          </ul>
        </template>
      </homePanelVue>
    </div>
  </div>
</template>

<style scoped lang="less">
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 406px;
  li {
    width: 306px;
    height: 406px;
    background: #f0f9f4;
    img {
      width: 306px;
      height: 306px;
    }
    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .price {
      color: @priceColor;
    }
  }
}
.brand-list{
  display: flex;
  li{
    flex:1;
    padding: 10px;
  }
}
</style>
